<template>
    <div class="rule_form_container">
        <el-form ref="ruleForm" :rules="rules" :model="formData" label-width="80px">
            <el-row v-if="!formData.sid">
                <el-col :span="8">
                    <el-form-item label="编码" prop="code">
                        <el-input v-model="formData.code"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="formData.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="状态">
                        <el-switch v-model="formData.state" :active-value="1"
                                   :inactive-value="0" active-color="#13ce66" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="0px">
                        <vxe-table-template :data="dataList" :options.sync="tableOptions" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script>
import base from "@common/components/dialog/base.js";
import "./RuleItem.js";

export default {
    extends: base,
    name: "RuleForm",
    data() {
        const _this = this;
        return {
            rules: {
                code: [
                    { required: true, message: "请输入编码", trigger: "blur" },
                ],
                name: [
                    { required: true, message: "请输入名称", trigger: "blur" },
                ],
            },
            formData: {
                state: 1,
            },
            dataList: [],
            tableOptions: {
                ref: "RuleFormTable",
                columns: [
                    {
                        label: "属性",
                        prop: "type",
                        align: "center",
                        width: 120,
                        editRender: {
                            name: "ElSelect",
                            autofocus: 'input.el-input__inner',
                            props: {
                                filterable: true,
                            },
                            options: [
                                { value: 1, label: "固定值", },
                                { value: 2, label: "日期格式", },
                                { value: 3, label: "动态文本", },
                                { value: 4, label: "顺序号", },
                            ],
                            events: { change: _this.rewriteChangeRow },
                        },
                    },
                    {
                        label: "规则",
                        prop: "value",
                        align: "center",
                        tooltip: false,
                        cellRender: {
                            name: 'RuleItem',
                            options: {},
                        },
                    },
                ],
                operates: {
                    list: [
                        {
                            id: "add",
                            type: "primary",
                            icon: "fa fa-plus",
                            show: true,
                            method: (key, row) => {
                                _this.add(row);
                            },
                        },
                        {
                            id: "del",
                            type: "danger",
                            icon: "fa fa-trash-o",
                            show: true,
                            method: (key, row) => {
                                _this.del(row);
                            },
                        },
                    ],
                },
                getMaxHeight() {
                    let height = $(_this.getActiveTabsContainer()).height() * 0.8 - 100;
                    if (_this.$utils.isEmpty(_this.formData.sid)) {
                        height -= 40;
                    }
                    return height;
                },
            },
        };
    },
    methods: {
        async init() {
            const _this = this;
            if (_this.propsData.init) {
                return;
            }
            _this.dataList = [];
            await _this.initParamsList();
            if (_this.$refs.ruleForm) {
                _this.$refs.ruleForm.clearValidate();
            }
            _this.formData = $.extend({}, { state: 1 }, _this.propsData.row);
            if (_this.$utils.isNotEmpty(_this.formData.sid)) {
                await _this.initRuleItemList();
            } else {
                let init = [ { type: 1 }, { type: 2 }, { type: 3 }, { type: 4 } ];
                _this.dataList = _this.resetIndex(init);
            }
        },
        initParamsList() {
            const _this = this;
            return _this.fetchData(_this.$api.API_FindCommonParameterList, {
                paramsList: [
                    { key1: 'TYPE_DATE_VALUE1', keyName: 'type_2' },
                    { key1: 'TYPE_AUTO_TEXT_VALUE1', keyName: 'type_3' },
                    { key1: 'TYPE_SN_VALUE1', keyName: 'type_4' },
                ],
            }).then(result => {
                let resData = result.data || {};
                let columns = _this.tableOptions.columns.map(item => {
                    let obj = $.extend({}, item);
                    if (item.prop === 'value') {
                        let cellRender = $.extend({}, item.cellRender);
                        cellRender.options = resData;
                        obj.cellRender = cellRender;
                    }
                    return obj;
                });
                _this.tableOptions = $.extend({}, _this.tableOptions, { columns });
            }).catch(() => {
            });
        },
        initRuleItemList() {
            const _this = this;
            return _this.fetchData(_this.$api.API_FindBaseCodeRuleItems, {
                code_rule_sid: _this.formData.sid,
            }).then(result => {
                let resData = result.data || [];
                if (!_this.$utils.isNotEmptyList(resData)) {
                    resData.push({
                        type: 1,
                        value1: null,
                        value2: null,
                        value3: null,
                        value4: null,
                    });
                }
                _this.dataList = _this.resetIndex(resData);
            }).catch(() => {
            });
        },
        rewriteChangeRow({ row, column }) {
            const _this = this;
            column = Object.assign({}, column, column.params);
            // 手动限制控制数字位数
            if (column.editRender && column.editRender.double) {
                _this.$set(row, column.prop, _this.$XEUtils.DoubleInput(row[column.prop], column.editRender.double));
                return;
            }
            if (column.editRender) {
                _this.$set(row, column.prop, row[column.prop]);
            }
        },
        add(row) {
            const _this = this;
            let list = _this.dataList.map(item => $.extend({}, item));
            list.splice(row._index + 1, 0, {
                type: 1,
            });
            _this.dataList = _this.resetIndex(list);
        },
        del(row) {
            const _this = this;
            if (_this.dataList.length === 1) {
                return;
            }
            let list = _this.dataList.filter(item => item._index !== row._index);
            _this.dataList = _this.resetIndex(list);
        },
        async confirm() {
            const _this = this;
            let valid = true;
            if (!_this.$utils.isNotEmpty(_this.formData.sid)) {
                valid = await _this.validateForm('ruleForm');
            }
            if (valid) {
                let subData = $.extend({}, _this.formData);
                subData.data_list = _this.dataList.map(item => {
                    let obj = $.extend({}, item);
                    if (item.type === 4) {
                        obj.value3 = item.value3 || 0;
                        obj.value4 = item.value4 || 0;
                    }
                    obj.sn = item._index + 1;
                    return obj;
                });
                return _this.fetchData(_this.$api.API_SaveBaseCodeRule, subData).then(() => {
                    _this.$message.success('保存成功！');
                    return true;
                }).catch(() => {
                    return false;
                });
            }
            return valid;
        },
    },
};
</script>

<style lang="less" rel="stylesheet/less" scoped>
.rule_form_container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
